<template>
	<view class="personal-box">
		<u-form labelPosition="top" :model="form" ref="form">
			<u-form-item prop="name" label="姓名">
				<u-input v-model="form.name" placeholder="请输入您的姓名" :placeholder-style="placeholderStyle"></u-input>
			</u-form-item>
			<u-form-item prop="code" label="身份证号">
				<u-input v-model="form.code" placeholder="请输入您的身份证号" :placeholder-style="placeholderStyle" />
			</u-form-item>
			<u-form-item prop="account" label="身份证照片">
				<view style="width: 100%;">
					<u-image src="../../static/icon/photo.jpg" mode="widthFix" class="idcar"></u-image>
					<view class="title-box">身份证正面</view>
					<u-image src="../../static/icon/guohui.jpg" mode="widthFix" class="idcar"></u-image>
					<view class="title-box">身份证反面</view>
				</view>
			</u-form-item>
			<u-form-item prop="address" label="地址">
				<view @click="show=!show" :style="{color:form.address?'#000':'#aaaaaa'}">
					{{form.address || '请选择您的地址'}}
				</view>
				<u-select v-model="show" mode="mutil-column-auto" :list="list" @confirm="confirm"></u-select>
			</u-form-item>
		</u-form>
		<view class="card_box card_text_login" @click="login()">
			提交
		</view>
	</view>
</template>

<script>
	import * as database from '@/utils/database.js'
	export default {
		data() {
			return {
				placeholderStyle: 'color:#aaaaaa',
				form: {
					account: '',
					password: '',
					address: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入您的姓名',
						trigger: 'blur',
					}],
					code: [{
						required: true,
						message: '请输入您的身份证号',
						trigger: 'blur',
					}],
				},
				show: false,
				list: []
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
			this.list = database.list
		},
		methods: {
			confirm(e) {
				this.form.address = `${e[0].label}-${e[1].label}-${e[2].label}`
			}
		}
	}
</script>

<style>
	.personal-box {
		width: 92%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 80rpx;
	}

	.idcar {
		border-radius: 8rpx;
	}

	.title-box {
		text-align: center;
		font-size: 32rpx;
		padding: 10rpx 0 40rpx 0;
	}
	.card_box {
		padding: 10rpx 30rpx;
	}
	.card_text_login {
		background-color: #014AF8;
		color: #FFFFFF;
		font-size: 30rpx;
		text-align: center;
		padding-top: 22rpx;
		padding-bottom: 22rpx;
		margin-top: 84rpx;
		border-radius: 8rpx;
	}
</style>
